<template>
  <div>
      <div v-if="bannerImgList.length" class="swiper-wrapper" :style="{height:`${BannerHeight}px`}">
    <mt-swipe :auto="4000" class="banner-wrapper">
      <mt-swipe-item v-for="item in bannerImgList" :key="item.id">
        <img :src="item.pic" alt  ref="imgShow" @load="imageLoaded" />
      </mt-swipe-item>
       <br style='clear:both'/>
    </mt-swipe>
    </div>
    <div :style="{height:wrapperHeight+'px'}" ref="wrapper" class="page-loadmore-wrapper">
        <!-- <p class="Liststitle">最热歌单推荐</p> -->
      <mt-loadmore
       :topDistance="100"
      :bottomDistance="100"
      :topPullText="null"
      :bottomPullText="null"
      :bottom-all-loaded="allLoaded"
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :auto-fill="false"
      >
        <div
          v-for="item in discList"
          :key="item.id"
          class="discListWrapper"
          @click="getSongLists(item.id)"
        >
          <div class="left">
            <img :src="item.coverImgUrl" alt />
          </div>
          <div class="right">
            <p class="title">{{item.name}}</p>
            <div class="description">{{item.description}}</div>
            <p>
              <svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-bofang3"></use>
</svg>
              {{item.playCount}}
            </p>
          </div>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
import {
  getRecommend,
  getDiscList,
} from "../../api/recommend.js";

export default {
  created() {
    this.sliderInit();
    this.initDiscList();
  },
  data() {
    return {
        bottomStatus:"",
      bannerImgList: [],
      discList: [],
      loadImageStatus: true,
      allLoaded: false,
      limit: 10,
      wrapperHeight: 0,
      BannerHeight:0,
    };
  },
  methods: {
      imageLoaded(e){
          if(this.BannerHeight>0){
              return
          }
          this.BannerHeight=e.target.clientHeight
          this.wrapperHeight -=this.BannerHeight
      },
    getSongLists(id) {
        this.$store.dispatch("getRecommendDetailLists",id)
      this.$router.push({ path: '/recommendLists' })

    },
    sliderInit() {
      getRecommend().then(res => {
          this.bannerImgList = res.data.banners;
      });
    },
    initDiscList() {
      getDiscList().then(res => {
        this.discList = res.data.playlists;
      });
    },
    loadTop() {
    //   this.$refs.loadmore.onTopLoaded();
    },
    loadBottom() {
      this.limit+=10
       getDiscList(this.limit).then(res => {
              this.discList = res.data.playlists;
              if(res.data.playlists.length<this.limit){
        this.allLoaded = true;// 若数据已全部获取完毕
              }
            });
    }

  },
  mounted() {
    this.wrapperHeight =
      document.documentElement.clientHeight-this.$refs.wrapper.getBoundingClientRect().top;
  }
};
</script>

<style scoped lang="stylus">
p.Liststitle
    height 60px
    line-height 60px
    font-size 27px
    color gold
    font-weight 700
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.swiper-wrapper
    >>>.mint-swipe
        .mint-swipe-items-wrap
                img 
                    width 100%
        .mint-swipe-indicators
            .mint-swipe-indicator
                background hsla(0,0%,100%,.5)
                opacity 1
                &.is-active
                    width 20px
                    border-radius 5px
                    background  hsla(0,0%,100%,.8)
.page-loadmore-wrapper {
  overflow: scroll; 
  -webkit-overflow-scrolling : touch; 
  &::-webkit-scrollbar{
    display: none;
}
}
.banner-wrapper
    background #ccc
.discListWrapper
    color black
    height 100px
    display flex
    justify-content space-between
    padding 10px
    border-bottom 1px dashed  #ccc
    background rgba(233,233,216,0.2)
    img 
        height 100px
    .right
        width 70%
        background rgba(233,233,216,0.6)
        .description
            text-align left
            margin-left 10px
            display -webkit-box
            -webkit-box-orient: vertical
            -webkit-line-clamp: 2
            overflow: hidden
            height 33%
            line-height 18px
            text-indent 30px
        p
            text-align left
            margin-left 10px
            font-size 18px
            font-weight 700
            margin-top 5px
</style>